<template>
  <div>
    <div class="top">
      <div class="left">
        <div>
          <img src="../../assets/img/l3.jpg" alt="" />
        </div>
      </div>

      <div>
        <p @click="gologin">{{ hh }}</p>
        <h4>积分：0</h4>
      </div>
      <!-- <div v-else>
        <p>hhh</p>
        <h4>积分：6</h4>
        <span>退出登录</span>
      </div> -->
    </div>
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="新上线更稳定的付费快递查询接口"
    />
    <div class="center">
      <i class="van-icon van-icon-notes-o"></i>
      <p @click="goMyorder">我的订单</p>
      <i class="van-icon van-icon-arrow" @click="goMyorder"></i>
    </div>
    <div class="technologicalprocess">
      <div>
        <i class="van-icon van-icon-paid"></i>
        <p>待付款</p>
      </div>
      <div>
        <i class="van-icon van-icon-send-gift-o"></i>
        <p>待发货</p>
      </div>
      <div>
        <i class="van-icon van-icon-logistics"></i>
        <p>待收货</p>
      </div>
      <div>
        <i class="van-icon van-icon-comment-o"></i>
        <p>待评价</p>
      </div>
    </div>
    <Address />
    <div class="dv1" @click="gologin">Works of Hu Pengcheng</div>
  </div>
</template>

<script>
import Address from "../../components/personal/addres";
export default {
  components: {
    Address,
  },
  data() {
    return {
      isshow: true,
      hh: "立即登录",
    };
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.isshow = false;
      this.hh = "退出登录";
    } else {
      this.hh = "立即登录";
    }
  },
  methods: {
    gologin() {
      // console.log(123);
      if (localStorage.getItem("token")) {
        localStorage.removeItem("token");
        location.reload();
      } else {
        this.$router.push("/login");
      }
    },
    goMyorder() {
      if (localStorage.getItem("token")) {
        this.$router.push("/Myorder");
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  width: 93%;
  height: 17vh;
  display: flex;
  margin: 0 auto;
  //   margin-top: 1rem;
  padding: 1rem 0 0 1rem;
  background: rgb(228, 173, 71);
  align-items: center;

  .left {
    width: 40%;
    margin-right: 0.5rem;
    //  border-radius: 50%;
    div {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
}
.center {
  display: flex;
  justify-content: space-around;
  align-items: center;
  -webkit-box-align: center;
  i:nth-child(1) {
    font-size: 1rem;
    color: orange;
  }
  p {
    padding-top: 0.5rem;
  }
}
.technologicalprocess {
  margin: 1rem 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    width: 23%;
    text-align: center;
    i {
      font-size: 1rem;
    }
    p {
    }
  }
}
.dv1 {
  height: 1rem;
  background: #f5f5f5;
  text-align: center;
  line-height: 0.3rem;
  color: #6d6d6d;
  font-size: 0.64rem;
  line-height: 1rem;
}
</style>